{% if comments %}
  {% for comment in comments %}
    <div id="comment{{ comment.extension_comment_id }}" class="media">
      <img src="{{ comment.image }}" alt="{{ comment.member }}" title="{{ comment.member }}" class="mr-3 rounded-circle"/>
      <div class="media-body">
        <h5 class="mt-0">{{ comment.member }} <span>{{ comment.date_added }}</h5>
        <p>{{ comment.comment }}</p>
        <div class="reply">
          <div> {% if comment.reply %}
            {% for reply in comment.reply %}
              <div class="media">
                <img src="{{ reply.image }}" alt="{{ reply.member }}" title="{{ reply.member }}" class="mr-3 rounded-circle"/>
                <div class="media-body">
                  <h5 class="mt-0">{{ reply.member }} <span>{{ reply.date_added }}</h5>
                  <p>{{ reply.comment }}</p>
                </div>
              </div>
            {% endfor %}
            {% if comment.next %}
              <div class="text-center"><a href="{{ comment.next }}" class="btn btn-block">see more replies...</a></div>
            {% endif %}
            {% endif %}<a href="{{ comment.refresh }}" class="reply-refresh hide">refresh</a></div>
        </div>
        <p class="text-right">
          <button type="button" class="btn btn-link btn-xs">{{ button_reply }}</button>
        </p>
        <div class="reply-input-box" style="display: none;">
          <div class="media">
            <div class="media-body">
              <div class="form-group">
                <label for="input-comment{{ comment.extension_comment_id }}">Leave your comment</label> <textarea name="comment" placeholder="Write your comment here..." id="input-comment{{ comment.extension_comment_id }}" class="form-control"></textarea>
              </div>
              <div class="text-right"><a href="{{ comment.add }}" class="btn btn-primary btn-sm">Comment</a></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    </div>
  {% endfor %}
  <br/>
  <div class="text-center">{{ pagination }}</div>
{% endif %}
